<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>网络货运平台省运管数据控制台</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="小镖人、社区、网络货运">
    <meta name="description" content="小镖人、社区、网络货运">
    <link rel="stylesheet" href="../../../xbr_layui_extend/layui-v2.6.8/css/layui.css">
    <style>
        .layui-layout-admin {position: fixed; bottom: 0; left: 0; width: 100%; height: 50px;}
        .layui-layout-admin .layui-footer{padding: 10px 0; text-align: center;left: 0}
    </style>
</head>
<body>
<div class="layui-fluid" style="padding: 15px;">
    <form class="layui-form layui-form-pane" action="" lay-filter="form-initPlat" id="userForm" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">付款账户</label>
            <div class="layui-input-block">
                <select id="bankcard" lay-filter="bankcard" name="bankcardId" lay-verify="required"></select>
            </div>
        </div>
        <!--表格部分-->
        <table class="layui-hide" id="accTable" lay-filter="accTable"></table>
        <!--提交按钮-->
        <div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
                <div class="layui-footer">
                    <button id="text9" class="layui-btn" lay-submit="" lay-filter="post-initPlat"><i class="layui-icon">&#xe605;</i>立即提交</button>
                </div>
            </div>
        </div>
    </form>
    <!-- 隐藏体 -->
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <a class="layui-btn layui-btn-sm" lay-event="add">添加收款人</a>
            <a class="layui-btn layui-btn-sm" lay-event="import">导入收款人(开发中)</a>
        </div>
    </script>
    <script type="text/html" id="bar">
        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">移除</a>
    </script>
</div>

<script src="../../../xbr_layui_extend/layui-v2.6.8/layui.js"></script>
<script>
    layui.extend({
        admin: '/platform/xbr_layui_extend/admin' //集成路径
    }).use(["admin", 'form', 'table'], function () {
        const $ = layui.$, form = layui.form, admin = layui.admin, table = layui.table;
        let bankcardList,bankcard,tableData = [];

        ///函数栈
        queryPayBankCard(function (cardList) {
            bankcardList = cardList;
            bindOptions($("#bankcard"), cardList, (item) => item.id, function (item) {
                const endNo = item['bankAccNo'].substring(item['bankAccNo'].length - 4, item['bankAccNo'].length);
                return item['bankName'] + "(****" + endNo + ')';
            });
            form.render(null, 'form-initPlat');
            refTable();
        });

        //刷新TABLE数据
        function refTable() {
            table.render({
                elem: '#accTable',
                toolbar: '#toolbar',
                totalRow: true,
                cols: [[ //标题栏
                    {field: 'inAcctName', title: '收款人', width: 100, totalRowText: '合计'},
                    {field: 'inAcctNo', title: '收款账号', minWidth: 100},
                    {field: 'inAcctBankName', title: '开户行'},
                    {field: 'tranAmount', title: '金额', width: 98, totalRow: true},
                    {fixed: 'right', title:'操作', toolbar: '#bar', width:78}
                ]],
                data: tableData,
            });
        }

        //头工具栏事件
        table.on('toolbar(accTable)', function(obj){
           if (obj.event==="add"){
               layer.open({
                   type: 2,
                   area: ['720px',"560px"],
                   title: "添加收款人",
                   content: ['./paySingleTransfer.html'],
                   success:function (layero, index) {
                       const iframe = window['layui-layer-iframe' + index];
                       if (iframe['child']==null) return;
                       iframe['child'](function (data) {
                           tableData.push(data);
                           refTable();
                           layer.close(index);
                       });
                   }
               });
           }
        });

        //监听行工具事件
        table.on('tool(accTable)', function(obj){
            if (obj.event==='del'){
                let index = tableData.indexOf(obj.data);
                tableData.splice(index, 1);
                refTable();
            }
        });

        //绑定下拉选项
        function bindOptions(jqElm, dataList, valueBack, labelBack) {
            jqElm.empty();
            jqElm.append('<option value="">请选择</option>');
            for (let item of dataList) {
                jqElm.append('<option value="' + valueBack(item) + '">' + labelBack(item) + '</option>');
            }
        }

        ///SELECT监听: 银行卡选择
        form.on('select(bankcard)', function (data) {
            let filter = bankcardList.filter(item => item.id === data.value);
            bankcard = filter.length > 0 ? filter[0] : null;
        });

        //上传完毕 提交表单
        form.render(null, 'form-initPlat');
        form.on('submit(post-initPlat)', function (data) {
            layer.confirm('确认提交?', {icon: 3, title:'提示'}, function(index){
                const postField = data.field;
                if (bankcard == null) return ;
                for (const item of tableData){
                    item.outAcctNo = bankcard['bankAccNo'];
                    item.outAcctName = bankcard['holdCardName'];
                    item.outBankShortName = bankcard['bankShortName'];
                }
                postField.tradeRecordListJson = JSON.stringify(tableData);
                admin.req({
                    url: "/platform/pab/batchTrade",
                    data: postField,
                    done: function (res) {
                        layer.msg("支付发起成功", {offset: 'auto', icon: 1,time:1000});
                        const index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    }
                });
                layer.close(index);
            });
            return false;
        });

        //获取付款人（平台）银行卡列表
        function queryPayBankCard(callback) {
            admin.req({
                url: "/platform/bank/getBankCardList",
                data: {"bankShortName": "SPABANK"},
                done: function (res) {
                    callback(res.data);
                }
            });
        }

    });
</script>
</body>
</html>